<template>
    <fieldset>
        <legend><h2>多个元素动画</h2></legend>
        <button @click="isShow=!isShow">点击动画</button>
    <transition leave-active-class="animate__animated animate__swing" enter-active-class="animate__animated animate__bounce" >
        <p id="a" v-if="isShow" >这是第一个p标签</p>
        <p  id="b" v-else  >这是第二个p标签</p>
    </transition>
    </fieldset>
</template>

<script>
    export default {
        name: "Animation4",
        data:()=>{
            return{
                isShow:true
            }
        }
    }
    /*
    当有相同标签名的元素切换时,需要通过key属性(:key)设置唯一的值来标记标签,让VUe将其分开,否则Vue为了效率只会替换相同的标签中的内容
    2,默认情况下多元素动画是同时执行的,想要控制动画的先后顺序,需要在transition组件中设置mode(过度动画模式)属性
    in-out

    * */
</script>

<style scoped>


    @import "../../node_modules/animate.css/animate.css";
    #a{
        width: 200px;
        height: 50px;
        background-color: darkslateblue;
    }
 #b{
        width: 200px;
        height: 200px;
        background-color: brown;
    }
</style>